<template>
  <div v-if="!mixinState.mSelectMode">
    <Divider plain orientation="left">画布大小</Divider>
    <Form :label-width="40" class="form-wrap">
      <FormItem label="宽度" prop="name">
        <InputNumber v-model="width" @on-change="setSize"></InputNumber>
      </FormItem>
      <FormItem label="高度" prop="name">
        <InputNumber v-model="height" @on-change="setSize"></InputNumber>
      </FormItem>
    </Form>
    <Button type="primary" long @click="() => (showModal = true)">选择 预设尺寸</Button>

    <Modal v-model="showModal" title="调整画布尺寸" @on-ok="handleConfirm" @on-cancel="handleClose">
      <p>调整画布尺寸</p>
      <ButtonGroup vertical style="margin: 10px 0">
        <Button
          type="dashed"
          v-for="(item, i) in presetSize"
          :key="`${i}presetSize`"
          size="small"
          style="text-align: left"
          @click="setSizeBy(item.width, item.height)"
        >
          {{ item.label }}:{{ item.width }}x{{ item.height }}
        </Button>
      </ButtonGroup>

      <Form :label-width="40" class="form-wrap" style="justify-content: flex-start">
        <FormItem label="宽度	" prop="name" style="margin-right: 10px">
          <InputNumber :min="1" :max="5000" v-model="modalData.width"></InputNumber>
        </FormItem>
        <FormItem label="宽度" prop="name">
          <InputNumber :min="1" :max="5000" v-model="modalData.height"></InputNumber>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script setup name="CanvasSize">
import { Modal } from 'view-ui-plus';
import useSelect from '@/hooks/select';
import { storeToRefs } from 'pinia';
import useEditorStore from '@/store/editor';
let store = useEditorStore();
let { state } = storeToRefs(store);
const { mixinState, canvasEditor } = useSelect();

const DefaultSize = {
  width: state.value.width,
  height: state.value.height,
};

const showModal = ref(false);
const modalData = reactive({
  width: DefaultSize.width,
  height: DefaultSize.height,
});
let width = ref(DefaultSize.width);
let height = ref(DefaultSize.height);
let presetSize = reactive([
  {
    label: '红书竖版',
    width: 900,
    height: 1200,
  },
  {
    label: '红书竖版',
    width: 1200,
    height: 900,
  },
  {
    label: '红书竖版',
    width: 1080,
    height: 1920,
  },
]);

onMounted(() => {
  canvasEditor.on('sizeChange', (width, height) => {
    width.value = width;
    height.value = height;
  });
  watchEffect(() => {
    width.value = state.value.width;
    height.value = state.value.height;
  });
});

const setSizeBy = (w, h) => {
  modalData.width = w;
  modalData.height = h;
};
const setSize = () => {
  canvasEditor.setSize(width.value, height.value);
};

const handleClose = () => {
  showModal.value = false;
};

const handleConfirm = () => {
  width.value = modalData.width;
  height.value = modalData.height;
  setSize();
  handleClose();
};
</script>

<style scoped lang="less">
:deep(.ivu-form-item) {
  margin-bottom: 0;
}
:deep(.ivu-divider-plain) {
  &.ivu-divider-with-text-left {
    margin: 10px 0;
    font-weight: bold;
  }
}

.form-wrap {
  display: flex;
  justify-content: space-around;
  align-content: center;
  margin-bottom: 10px;
}
</style>
